<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系客服</title>
    <link rel="stylesheet" href="customer-service.css">
</head>
<body>
    <div class="chat-container">
        <header class="chat-header">
            <h2>在线客服</h2>
            <div class="status-indicator">
                <span class="status-dot"></span>
                <span class="status-text">在线</span>
            </div>
        </header>

        <div class="chat-messages" id="chatMessages">
            <div class="welcome-message">
                <p>您好！我是客服小助手，有什么可以帮助您的吗？</p>
            </div>
        </div>

        <div class="chat-input-container">
            <div class="input-group">
                <input type="text" id="messageInput" placeholder="请输入您的问题..." maxlength="500">
                <button id="sendButton" class="send-btn">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
                    </svg>
                    发送
                </button>
            </div>
            <div class="input-hint">
                <span id="charCount">0</span>/500
            </div>
        </div>
    </div>

    <div class="connection-status" id="connectionStatus">
        <span class="status-text">正在连接...</span>
    </div>

    <script src="customer-service.js"></script>
</body>
</html>